import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'

import Ionicons from 'react-native-vector-icons/Ionicons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import HomeScreen from './HomeStack'
import NewsScreen from './NewsStack'
import UserScreen from './UserStack'

const Tab = createBottomTabNavigator()
export default class Index extends Component {
  render() {
    return (
      <Tab.Navigator
        initialRouteName="HomePage"
        screenOptions={({ route }) => ({
          headerShown: false,
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
          tabBarIcon: ({ focused, color, size }) => {
            let iconName
            if (route.name === 'HomePage') {
              iconName = focused ? 'add-circle' : 'add-circle-outline' 
            } else if (route.name === 'News') {
              iconName = focused ? 'settings' : 'settings-outline'
            } else if (route.name === 'User') {
              iconName = focused ? 'person' : 'person-outline'
            }
            return <Ionicons name={iconName} size={size} color={color} />
          }
        })}
      >
        <Tab.Screen name="HomePage"  component={ HomeScreen }
          options={{
            tabBarActiveTintColor: '#59E0A7',
            tabBarInactiveTintColor: '#5E5E5E'
          }}
        />
        <Tab.Screen name="News" component={ NewsScreen }
          options={{
            tabBarActiveTintColor: '#59E0A7',
            tabBarInactiveTintColor: '#5E5E5E'
          }}
        />
        <Tab.Screen
          options={{
            tabBarActiveTintColor: '#59E0A7',
            tabBarInactiveTintColor: '#5E5E5E'
          }}
          name="User" component={ UserScreen } />
      </Tab.Navigator>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    fontSize: 40
  }
})
